<template>
  <div class="app-container">
    <!-- 用户基本信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商户名称" prop="merchantName">
              <el-input clearable v-model="ruleForm.merchantName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商户状态">待审核</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="法人姓名" prop="legalName">
              <el-input clearable v-model="ruleForm.legalName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人手机" prop="legalContact">
              <el-input clearable v-model="ruleForm.legalContact"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 身份证正面 -->
        <el-row>
          <el-col :span="18">
            <el-form-item label="法人身份证正面">
              <UploadImage :defaultList="ruleForm.identityA" color="#1890ff" class="editor-upload-btn" />
            </el-form-item>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <!-- 身份证背面 -->
        <el-row>
          <el-col :span="18">
            <el-form-item label="法人身份证背面">
              <UploadImage :defaultList="ruleForm.identityB" color="#1890ff" class="editor-upload-btn" />
            </el-form-item>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <!-- 营业执照 -->
        <el-row>
          <el-col :span="18">
            <el-form-item label="营业执照照片">
              <UploadImage :defaultList="ruleForm.busLicensePic" color="#1890ff" class="editor-upload-btn" />
            </el-form-item>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 小程序信息 -->
    <el-card style="marginTop:20px" class="box-card">
      <div slot="header" class="clearfix">
        <span>小程序信息</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小程序APPID" prop="appId">
              <el-input clearable v-model="ruleForm.appId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="APP_SECRET" prop="appSecret">
              <el-input clearable v-model="ruleForm.appSecret"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 提交按钮 -->
    <el-row style="margin: 20px 0;">
      <el-col style="text-align:right">
        <el-button @click="handleSubmit" type="success">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    const customerId = this.$store.getters.customerId;
    return {
      ruleForm: {
        appId: '', // 小程序申请的App id ,
        appSecret: '', // 小程序申请的secret ,
        busLicensePic: [], // 营业执照照片
        identityA: [], // 身份证正面照片
        identityB: [], // 身份证背面照片
        legalContact: '', // 法人联系人方式
        legalName: '', // 法人姓名
        merchantName: '', // 商家姓名
        customerId,
      },
      rules: {
        merchantName: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      id: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getMerchantInfo();
    },
    // 查询商家信息
    async getMerchantInfo() {
      const params = this.$store.getters.customerId;
      const { data } = await this.$api.getMerchantInfo(params);
      if (!data.id) return;

      const { busLicensePic, identityA, identityB, id } = data;
      this.id = id;
      this.ruleForm.busLicensePic.push({ url: busLicensePic });
      this.ruleForm.identityA.push({ url: identityA });
      this.ruleForm.identityB.push({ url: identityB });

      delete data.busLicensePic;
      delete data.identityA;
      delete data.identityB;

      this.ruleForm = Object.assign(this.ruleForm, data);
    },
    async handleSubmit() {
      const { busLicensePic, identityA, identityB } = this.ruleForm;

      const params = JSON.parse(JSON.stringify(this.ruleForm));
      params.busLicensePic = busLicensePic[0].url;
      params.identityA = identityA[0].url;
      params.identityB = identityB[0].url;

      if (this.id) {
        const response = await this.$api.setMerchantInfo(params)
        this.$notify({
          title: '更新成功',
          message: '更新用户信息成功',
          type: 'success',
        });
      } else {
        const response = await this.$api.addMerchantInfo(params)
        this.$notify({
          title: '更新成功',
          message: '新增用户信息成功',
          type: 'success',
        });
      }

      this.$router.push({ path: '/dashboard' });
    },
  },
};
</script>
